﻿<div class="layui-card" id="lg-CourseEvaluate">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>调查数据</div>
    <div class="layui-card-body" id="">
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline" style="display:flex;position:relative;z-index:999">
            <!--查询条件-->
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'年级',Options:options.grade}" v-model:value="where.grade" v-on:done="GetClass" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'班级',Options:options.class}" v-model:value="where.class" v-on:done="GetCourse" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'课程',Options:options.course}" v-model:value="where.courseName" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-singletext :data="{Title:'姓名'}" v-model:value="where.studentName"></lg-form-singletext>
            </div>

            <div class="lg-search-item" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="OnSearch">搜索</button>
            </div>
        </div>

        <!-- 数据主体 -->
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAdd"><i class="fa fa-plus fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="OnImport"><i class="fa fa-file-excel-o fa-fw"></i>导入</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="OnExport"><i class="fa fa-file-excel-o fa-fw"></i>导出</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="OnRefresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':courses.length>0&&checked.length==courses.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th>序号</th>
                            <th>年级</th>
                            <th>班级</th>
                            <th>学生姓名</th>
                            <th>课程</th>
                            <th>X-Number</th>
                            <th>Y-Number</th>
                            <th>添加日期</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in courses">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td>{{index+1}}</td>
                            <td>{{row.grade}}</td>
                            <td>{{row.class}}</td>
                            <td>{{row.studentName}}</td>
                            <td>{{row.courseName}}</td>
                            <td>{{row.xValue}}</td>
                            <td>{{row.yValue}}</td>
                            <td>{{row.addTime}}</td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="" v-on:click="OnEdit(row)"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除学生" v-on:click="OnDelete(row)"><span class="fa fa-trash-o fa-fw"></span></a>                              
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="courses.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager" style="margin-top:-10px;"></div>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function () {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        courses:[],
                        options: {
                            Grades: [],
                            Plans: [],
                            Semester: []
                        },
                        where: {
                            page: 1,
                            limit: 10,
                            grade: '',
                            class: '',
                            courseName: '',
                            studentName: ''
                        },
                        options: {
                            grade: [],
                            class: [],
                            course: []

                        },
                        loading: false,
                        checked: [],
                    }
                },
                mounted: function () {
                    this.GetGrade();
                    this.GetCourseEvaluate();
                },
                methods: {
                    GetGrade: function () {
                        lg.request({
                            url:"/api/sys/GetGrades",
                            success: res => {
                                if (res.code == 0) {
                                    this.options.grade = this.ToOptions(res.data,"grade");
                                }
                            }
                        })                     
                    },
                    GetClass:function(){
                        lg.request({
                            url: "/api/sys/GetClass",
                            data: { grade: this.where.grade },
                            success: res => {
                                if (res.code == 0) {
                                    this.options.class = this.ToOptions(res.data, "class");
                                }
                            }
                        })
                        this.GetCourse();
                    },
                    GetCourse: function () {
                        lg.request({
                            url: "/api/sys/GetCourse",
                            data: { grade: this.where.grade,class:this.where.class},
                            success: res => {
                                if (res.code == 0) {
                                    this.options.course = this.ToOptions(res.data, "course");
                                }
                            }
                        })
                    },
                    ToOptions: function (arry,key) {
                        var options = [{ Text: "", Value: "" }];
                        for (let i in arry) {
                            options.push({ Text: arry[i][key], Value: arry[i][key] })
                        }
                        return options;
                    },
                    GetCourseEvaluate: function () {
                        this.loading = true;
                        this.courses = [];
                        lg.request({
                            url: "/api/sys/GetCourseEvaluate",
                            data:this.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.courses = res.data || [];
                                    this.SetPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    OnSearch: function () {
                        this.where.page = 1;
                        this.GetCourseEvaluate();
                    },
                    OnRefresh: function () {
                        this.GetCourseEvaluate();
                    },
                    OnAdd:function(){
                        frame.NavigateTo({
                            url: "/Lgm/AddSurvey",
                            title: "添加"
                        })
                    },
                    OnEdit: function (row) {
                        frame.NavigateTo({
                            url: "/Lgm/EditSurvey?id="+row.id,
                            title: "修改"
                        })
                    },
                    OnDelete: function (row) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确认执行？",function(box){
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/DeleteCourseEvaluate",
                                method: "post",
                                data: JSON.stringify({ id: row.id }),
                                success: res => {
                                    if (res.code == 0) {
                                        that.GetCourse();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        
                    },
                    OnImport: function () {
                        layer.msg("待开发", {icon:1})
                    },
                    OnExport: function () {
                        layer.msg("待开发", { icon: 1 })
                    },
                    SetPage: function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager'
                            , curr: that.where.page
                            , limit: that.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.where.page = obj.curr;
                                    that.where.limit = obj.limit;
                                    that.GetCourseEvaluate();
                                }
                            }
                        });
                    },
                    isChecked: function (item) {
                        return this.checked.filter(p => p.id == item.id).length == 1;
                    },
                    onRowCheck: function (item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.id != item.id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function () {
                        var b = this.checked.length == this.courses.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.courses) {
                                arry.push(this.courses[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function (attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    }                   
                }
            })
            freeForm.regComponent(app);
            app.component('draggable', window.vuedraggable);
            page.vm = app.mount("#lg-CourseEvaluate")
        },
    }).mount();

</script>